<template>
  <div>
    <a-select v-if="query" style="width: 100%" @change="handleSelectChange">
      <a-select-option v-for="(item, index) in queryOption" :key="index" :value="item.value">
        {{ item.text }}
      </a-select-option>
    </a-select>
    <a-switch v-else v-model="checkStatus" :disabled="disabled" @change="handleChange" />
  </div>
</template>
<script>

  export default {
    name: 'JSwitch',
    props: {
      value: {
        type: [String, Number],
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      options: {
        type: Array,
        required: false,
        default: () => ['Y', 'N']
      },
      query: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data() {
      return {
        checkStatus: false
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          if (!this.query) {
            if (!val) {
              this.checkStatus = false
              this.$emit('change', this.options[1])
            } else {
              if (this.options[0] == val) {
                this.checkStatus = true
              } else {
                this.checkStatus = false
              }
            }
          }
        }
      }
    },
    computed: {
      queryOption() {
        let arr = []
        arr.push({ value: this.options[0], text: '是' })
        arr.push({ value: this.options[1], text: '否' })
        return arr
      }
    },
    methods: {
      handleChange(checked) {
        let flag = checked === false ? this.options[1] : this.options[0]
        this.$emit('change', flag)
      },
      handleSelectChange(value) {
        this.$emit('change', value)
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
